import { useState, useEffect } from 'react'
import { Form, MessagePlugin, Input, DatePicker, Row, Col, Button } from 'tdesign-react'
import SearchSelect from '@/components/Form/SearchSelect'
import styles from './index.module.less'

const { FormItem, useForm } = Form

type PropsType = {
  onSearch: Function
}

const TopSearch = (props: PropsType) => {

  const {
    onSearch
  } = props

  const [formRef] = useForm()

  const onSubmit = (context: any) => {
    if (context.validateResult === true) {
      onSearch(context.fields)
    } else {
      MessagePlugin.error({
        content: context.firstError,
        placement: 'top-right',
        duration: 2000})
    }
  }

  return <div className={styles.topSearch}>
    <Form form={formRef} onSubmit={onSubmit} className='aio-form-search' resetType='initial'>
      <Row gutter={16}>
        <Col span={4}>
          <FormItem name='projectName' label='项目名称'>
            <SearchSelect
              label='项目名称'
              dictionary={'ProjectList'}
              filterKeyList={['label']}
              isCustomize
              multiple />
          </FormItem>
        </Col>
        <Col span={4}>
          <Button className={styles.topSearchButton} type='submit'>查询</Button>
          <Button className={styles.topResetButton} type='reset'>重置</Button>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={4}>
          <FormItem name='startDate' label='项目开始时间'>
            <DatePicker />
          </FormItem>
        </Col>
        <Col span={4}>
          <FormItem name='endDate' label='项目结束时间'>
            <DatePicker />
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
}

export default TopSearch
